<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Manic Monkey Madness</title>
        <link href="styles/index.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="header">
            <img id="logo" src="/images/logo_text.png" alt="Manic Monkey Madness"/>
        </div>

        <div id="game">
            <canvas id="game_canvas" height="450" width="900">
                <p>Get a real browser! Try <a href="http://www.google.com/chrome">Chrome</a>.</p>
            </canvas>

            <div id="buttons">
                <input id="help" type="image" src="images/icons/help.png" alt="Help" title="Help Me!"/>
                <input id="sound" type="image" alt="Sound" title="Toggle Sound Effects" />
                <input id="music" type="image" alt="Music" title="Toggle Awesome Music" />
            </div>

            <ul id="nav">
                <li><a href="#" id="help_link" title="All you need to know to play">Help</a> |</li>
                <li><a href="#" id="high_score_link">High Scores</a> |</li>
                <li><a href="http://code.google.com/p/manicmonkeymadness/" target="project"
                    title="The project page at Google Code">Google Code</a> |</li>
                <li><a href="test/index.html" target="test" title="Run test suite">QUnit</a> |</li>
                <li><a href="http://www.youtube.com/watch?v=0Y-joCfdaIs" target="youtube" 
                    title="m3 teaser">YouTube Video</a></li>
            </ul>
        </div>

        <div id="console">
            <h2>Console</h2>
            <div id="console_items"></div>
        </div>

        <div id="game_select" class="dialog">
            <p>Select which game mode you wish to play:</p>

            <p>Last Monkey Standing &mdash; Play until all monkeys on one side have been lost.</p>
            <div class="game_lms">
                <input type="button" id="lms" value="Last Monkey Standing" />
            </div>

            <p>Demolition Derby &mdash; Select how many shots (per player) before the game ends and
            the player with the highest score wins. If the turn limit is exceeded, both players
            will be given an extra shot until there is a winner.</p>
            <div class="game_dd">
                <input type="button" id="dd3" value="Demolition Derby (3)" />
                <input type="button" id="dd5" value="Demolition Derby (5)" />
                <input type="button" id="dd10" value="Demolition Derby (10)" />
            </div>

            <label for="unlock">
                <input type="checkbox" id="unlock"/>
                Unlock all weapons
            </label>
        </div>

        <div id="fort_select" class="dialog">
            <p>Select which forts you wish to use:</p>

            <p>Choose from the premade forts</p>
            <div id="premade_fort_choices"></div>

            <p>Or create your own with the fort editor or paste in one you have saved</p>
            <input type="button" id="custom_fort" value="Create Custom Fort" />
            <input type="button" id="reuse_fort" value="Reuse Saved Fort" />

            <div id="reuse_fort_input">
              <textarea></textarea><br />
              <input type="button" id="fort_submit" value="Submit" />
            </div>
        </div>

        <div id="help_screen" class="dialog">
            <h2>Manic Monkey Madness (M3)</h2>
            <h4>How to Play</h4>
            <ul>
                <li>Select a weapon by pressing the <kbd>W</kbd> key; the rock is selected by default.</li>
                <li>Click and drag to adjust the angle at which the cannon will shoot; release to fire.</li>
                <li>Destroy enemy fortress pieces and monkeys to earn points.</li>
                <li>Eliminate all the enemy monkeys or get the highest score to win!</li>
            </ul>
            <h4>Projectile Types</h4>
            <ul>
                <li>Rock &mdash; A heavy projectile, slow but extremely destructive.</li>
                <li>Banana &mdash; A light projectile, extremely fast and useful for direct shots.</li>
                <li>Banana Bunch &mdash; Three light banana projectiles, extremely fast and useful for direct shots.</li>
                <li>Watermelon &mdash; A heavy and slow projectile, explodes shortly after impact
                    raining sweet seeds about the battlefield.  Some watermelons are duds, exploding
                    after the second or third bounce.  Take your chances with this one.</li>
                <li>Monkey &mdash; Shoot a flippin' monkey out of the cannon! What else is there to say?</li>
            </ul>
            <h4>Game Modes</h4>
            <ul>
                <li>Last Monkey Standing (LMS) - It's a fight to the finish. Players must fire upon each
                    other's fortress until one side has lost all of its monkeys.</li>
                <li>Demolition Derby (DD) - Wreck havoc on the enemy fortress. Gain as many points
                    as possible by destroying monkeys and fort pieces with a limited number of shots.</li>
            </ul>
            <h4>Controls and Tips</h4>
            <ul>
                <li><kbd>H</kbd> displays this help.</li>
                <li><kbd>Z</kbd> and <kbd>X</kbd>, as well as click and drag, adjust the angle of the active player's cannon.</li>
                <li><kbd>W</kbd> changes the cannon's weapon.</li>
                <li><kbd>P</kbd> toggles the music.</li>
                <li><kbd>S</kbd> toggles all sounds.</li>
                <li><kbd>C</kbd> toggles the debug console.</li>
                <li><kbd>D</kbd> toggles Box2D debug draw mode. (See what's going on behind the scenes!)</li>
            </ul>

            <a href="#" class="close">X</a>
        </div>

        <div id="fort_save" class="dialog">
            <p>If you are proud of your fort, copy it and save it somewhere. When you start a new
            game later, paste it into the fort selection screen to reuse.  Close this dialog and
            hit Play to use the fort now.</p>
            <textarea></textarea>

            <a href="#" class="close">X</a>
        </div>

        <div id="high_scores" class="dialog">
            <h2>High Scores:</h2>
            <div id="scoreboard"></div>

            <a href="#" class="close">X</a>
        </div>

        <div id="new_high_score" class="dialog">
            <h2>Congratulations! You have a new high score.</h2>
            <p>Enter your name to be immortalized on the M3 scoreboard.</p>
            <label for="high_score_name">Player: <input id="high_score_name" type="text" /></label>
            <input id="high_score_submit" type="button" value="Submit" />

            <a href="#" class="close">X</a>
        </div>

        <div id="lightbox"></div>
	
        <!-- Libraries -->
        <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

        <!-- Box2D Physics Engine -->
        <script src="scripts/box2d-2.1/box2d-2.1.min.js" type="text/javascript"></script>

        <!-- Setup -->
        <script src="scripts/modules/assets.js" type="text/javascript"></script>
        <script src="scripts/setup.js" type="text/javascript"></script>
        <script src="scripts/modules/game.js" type="text/javascript"></script>
        <script src="scripts/modules/config.js" type="text/javascript"></script>
        <script src="scripts/modules/fort_choices.js" type="text/javascript"></script>
        <script src="scripts/modules/game_choices.js" type="text/javascript"></script>

        <!-- Types -->
        <script src="scripts/types/vector.js" type="text/javascript"></script>
        <script src="scripts/types/sprite.js" type="text/javascript"></script>
        <script src="scripts/types/physics_object.js" type="text/javascript"></script>
        <script src="scripts/types/projectile.js" type="text/javascript"></script>
        <script src="scripts/types/weapon.js" type="text/javascript"></script>
        <script src="scripts/types/fort_piece.js" type="text/javascript"></script>
        <script src="scripts/types/enemy.js" type="text/javascript"></script>
        <script src="scripts/types/fortress.js" type="text/javascript"></script>
        <script src="scripts/types/level.js" type="text/javascript"></script>

        <!-- Modules -->
        <script src="scripts/modules/math.js" type="text/javascript"></script>
        <script src="scripts/modules/util.js" type="text/javascript"></script>
        <script src="scripts/modules/input.js" type="text/javascript"></script>
        <script src="scripts/modules/camera.js" type="text/javascript"></script>
        <script src="scripts/modules/score.js" type="text/javascript"></script>
        <script src="scripts/modules/launcher.js" type="text/javascript"></script>
        <script src="scripts/modules/contact.js" type="text/javascript"></script>
        <script src="scripts/modules/world.js" type="text/javascript"></script>
        <script src="scripts/modules/ui.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/button.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/done.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/score.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/monkey_count.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/turn.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/weapon.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/marker.js" type="text/javascript"></script>
        <script src="scripts/modules/ui/shots.js" type="text/javascript"></script>
        <script src="scripts/modules/sound.js" type="text/javascript"></script>

        <!-- States -->
        <script src="scripts/states/main_menu_state.js" type="text/javascript"></script>
        <script src="scripts/states/play_state.js" type="text/javascript"></script>
        <script src="scripts/states/edit_level_state.js" type="text/javascript"></script>

        <!-- Main -->
        <script src="scripts/main.js" type="text/javascript"></script>

    </body>
</html>
